<template>
  <div class="webchatExport">
    <div class="f-title">
      <!--导出任务列表-->
      {{$t('customer.exportTaskList')}}
      <!--刷新-->
      <span @click.stop="freshSearch" class="refresh"><i class="iconfont icon-shuaxin"></i></span>
    </div>
    <div class="tables">
      <div class="prompt">
        {{$t('webchat.exportTaskPrompt' + exportType, {limitNum: exportTaskLimit.webchatContent})}}
      </div>
      <div class="searchFactor">
        <Affix :label="$t('public.searchBadge')"></Affix>
        <el-form>
          <el-form-item>
            <span style="margin-left: 0px">{{$t('call.bAndETime')}}</span>
            <el-date-picker v-model="form.rangeTime"
                            type="datetimerange"
                            size="mini"
                            :editable = "false"
                            :picker-options="pickerOptions"
                            :placeholder="$t('public.timeRanges')">
            </el-date-picker>
            <span>{{$t('public.creator') + ':'}}</span>
            <el-select size="mini" v-model.trim="form.creatUser" filterable :placeholder="$t('public.pleasePick')">
              <el-option  v-for="(item, index) in agentOptions"
                          :label="item.label"
                          :key="index"
                          :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="btn-group">
            <el-button @click = "rest"
                       class="primary_btn">{{$t('public.reset')}}</el-button>
            <el-button type="primary"
                       @click="searchFun"
                       class="primary_btn">{{$t('public.search2')}}</el-button>
          </el-form-item>
        </el-form>
        <Affix :label="$t('call.queryResult')"></Affix>
      </div>
      <BatchExportList
        :data = "tableData"
        :tableLoading = "tableLoading"
        @turnPage = "turnPageFun"
        :records = "false"
        :downloadLink = "false"
        :currentPage = "currentPage"
        :cancelTaskShow = "false">
      </BatchExportList>
    </div>
  </div>
</template>
<script>
  /**
   * CoustomizeExport 导出任务列表组件
   * @author yangjiao
   * @path @/components/business-modules/customer/CoustomizeExport.vue
   * @methods
   * getList 回调数据 导出进度处理成中文，对应字段包含 export 正在导出 finish 完成 download 已下载
   * freshSearch 点击刷新触法的事件
   * handleDownLoad 下载事件
   */
  import Affix from '@components/ui-modules/affix/Affix'
  import BatchExportList from '@/components/public-modules/batch-export-list/BatchExportList'
  import {getDateTime, getCache} from '@/utils/m7Utils.js'
  export default {
    name: 'WebchatExportList',
    data () {
      return {
        tableData: {},
        tableLoading: false,
        currentPage: 1,
        exportTaskLimit: {},
        pickerOptions: {
          shortcuts: [{
            text: this.$t('sms.thisOneWeek'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisOneMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisThreeMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        form: {
          rangeTime: [],
          creatUser: []
        },
        agentOptions: []
      }
    },
    computed: {
      exportType () {
        return this.$store.state.isRealTimeExport ? 'Real' : ''
      }
    },
    methods: {
      turnPageFun (val) {
        this.currentPage = val
        this.getTableList()
      },
      getList (resp) {
        resp.list.map(item => {
          if (item.status === 'ready') {
            item.state = this.$t('webchat.exportWaitProcessing')
            item.class = 'exportProcessing'
          }
          if (item.status === 'wait') {
            item.state = this.$t('webchat.exportProcessing')
            item.class = 'exportProcessing'
          }
          if (item.status === 'export') {
            item.state = this.$t('webchat.exportOuting')
            item.class = 'exportProcessing'
          }
          if (item.status === 'exportSuccess') {
            item.state = this.$t('webchat.exportSuccess')
            item.class = 'exportSuccess'
          }
          if (item.status === 'exportFaild' || item.status === 'exportFaild' || item.status === 'failure') {
            item.state = this.$t('webchat.exportError')
            item.class = 'exportError'
          }
          if (item.status === 'expired') {
            item.state = this.$t('webchat.exportFailure')
            item.class = 'exportError'
          }
          if (item.createUser) {
            let createUser = getCache('agents', item.createUser)
            let displayName = createUser.displayName || '--'
            let exten = createUser.exten || '--'
            item.createUser = displayName + '[' + exten + ']'
          }
          if (item.query && item.query.comment) {
            item.remark = item.query.comment
          }
        })
        this.tableLoading = false
        return resp
      },
      getTableList () {
        let data = {
          limit: 10,
          page: this.currentPage,
        }
        if (this.form.rangeTime && this.form.rangeTime[0]) {
          data.startTime = getDateTime(this.form.rangeTime[0])
          data.endTime = getDateTime(this.form.rangeTime[1])
        }
        if (this.form.creatUser) {
          data.createUser = this.form.creatUser
        }
        this.tableLoading = true
        this.$store.dispatch('queryWebchatExportTaskList', data).then(resp => {
          this.tableData = this.getList(resp)
        })
      },
      freshSearch () {
        this.tableLoading = true
        if (this.currentPage === 1) {
          this.$store.dispatch('queryWebchatExportTaskList', {limit: 10, page: this.currentPage}).then(resp => {
            this.tableData = this.getList(resp)
          })
        } else {
          this.currentPage = 1
        }
      },
      rest () {
        this.form = {}
      },
      searchFun () { // 查询
        this.currentPage = 1
        this.getTableList()
      },
    },
    components: {
      BatchExportList,
      Affix
    },
    beforeMount () {
      this.tableLoading = true
      this.exportTaskLimit = this.$getCache('exportTaskLimit') || {}
      this.$store.dispatch('queryWebchatExportTaskList', {limit: 10, page: this.currentPage}).then(resp => {
        this.tableData = this.getList(resp)
      })
      this.$store.dispatch('getCache', { type: 'agents' }).then(agents => {
        this.agentOptions = agents.map(agent => ({ label: `${agent.displayName}[${agent.exten}]`, value: agent._id }))
      })
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../../assets/common.styl"
  .webchatExport
    height 100%
    width 100%
    overflow: auto
    .tables
      padding: 15px 20px 0 20px;
      .prompt
        color #4A5F9A
        margin-bottom 10px
      .deploy
        height 48px
        color #989898
        border 1px solid #ebebeb
        border-bottom none
        padding-left 14px
        .page
          margin-top 10px
        .el-pagination
          padding 0
    .searchFactor
      margin-top 30px
      span
        font-size 12px
        margin 0px 10px
      .el-form
        padding-left 16px
      .btn-group
        text-align right
        margin-bottom 30px
    .f-title
      border-bottom 1px solid $c-border1
      height 39px
      line-height 39px
      background $cf-white
      padding-left 24px
      font-size 18px
      color $cf-gray1
      position relative
      .refresh
        width 70px
        border none
        height 31px
        font-size 20px
        color $c-main
        cursor pointer
        position absolute
        right -30px
        .icon-shuaxin
          font-size 20px
  .exportProcessing
    color $cf-gray1
  .exportSuccess
    color $c-main
  .exportError
    color #fd7877
</style>
